<template>
  <div>
    <van-row @click="showLogin">
      <van-col span="6">
        <img :src="avatarSrc" alt="" />
      </van-col>
      <van-col span="10">{{ NickName }}</van-col>
      <van-col span="8">
        <van-icon name="arrow" />
      </van-col>
    </van-row>
    <van-grid :column-num="3" square>
      <van-grid-item icon="label-o" text="我的订单" @click="gridClick" />
      <van-grid-item icon="bill-o" text="优惠券" @click="gridClick" />
      <van-grid-item icon="goods-collect-o" text="礼品卡" @click="gridClick" />
      <van-grid-item icon="location-o" text="我的收藏" @click="gridClick" />
      <van-grid-item icon="flag-o" text="我的足迹" @click="gridClick" />
      <van-grid-item icon="contact" text="会员福利" @click="gridClick" />
      <van-grid-item icon="aim" text="文字" @click="gridClick" />
      <van-grid-item icon="warn-o" text="地址管理" @click="gridClick" />
      <van-grid-item icon="service-o" text="联系客服" @click="gridClick" />
      <van-grid-item icon="question-o" text="帮助中心" @click="gridClick" />
      <van-grid-item
        icon="smile-comment-o"
        text="意见反馈"
        @click="gridClick"
      />
    </van-grid>
    <div class="login_modal" v-if="showModal">
      <section @click="closeloginModal"></section>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="pwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { LoginRegisterAPI } from '../request/api'
export default {
  name: 'User',
  data () {
    return {
      avatarSrc: require('../assets/avatar.png'),
      username: '',
      password: '',
      showModal: false,
      NickName: '点击登录'
    }
  },
  created () {
    // 页面创建的时候，就获取本地存储中的用户昵称和头像
    let userInfo1 = localStorage.getItem('userInfo')
    if (userInfo1) {
      this.avatarSrc = JSON.parse(userInfo1).avatar
      this.NickName = JSON.parse(userInfo1).username
    } else {
      return
    }
  },
  methods: {
    onSubmit (values) {
      // console.log('submit', values)
      LoginRegisterAPI(values).then(res => {
        if (res.errno == 0) {
          // console.log(res)
          let { token, userInfo } = res.data
          this.$toast('请求成功')
          this.showModal = false
          // this.avatarSrc = userInfo.avatar
          // this.NickName = userInfo.username
          localStorage.setItem('token', token)
          // 序列化
          let userInfo2 = JSON.stringify(userInfo)
          localStorage.setItem('userInfo', userInfo2)
          // 将页面重新加载
          window.location.reload()
        } else {
          this.$toast('用户名或密码错误')
        }
      })
    },
    closeloginModal () {
      this.showModal = false
    },
    showLogin () {
      // 首先获取localstorage中的token
      let token = localStorage.getItem('token')
      if (token) {
        // token存在，就不打开模态框
        return
      } else {
        // 打开模态框
        this.showModal = true
      }
    },
    gridClick () {
      this.$toast('该功能尚未开放')
    }
  }
}
</script>

<style lang="less" scoped>
.van-row {
  padding: 0.2rem 4%;
  background: #333;
  color: #fff;
  .van-col {
    line-height: 0.8rem;
    font-size: 0.2rem;
    &:last-child {
      text-align: right;
    }
  }
  img {
    width: 0.8rem;
    border-radius: 50%;
    // 图片一定要转成块级，这样就没有baseline的布局bug
    display: block;
  }
}
.login_modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  section {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .van-form {
    width: 90%;
    padding: 0.1rem;
    box-sizing: border-box;
    background: #fff;
    position: absolute;
    left: 50%;
    margin-left: -45%;
    top: 40%;
  }
}
</style>
